import { event } from "./event";

export function handleMenuDrap(props) {
  let templateId = 0;
  let currentComponent = null; // 记录我拖动的时那个组件
  const dragenter = (e) => {
    // 进入元素中
    console.log('>>>进入元素中>>>');
    e.dataTransfer.dropEffect = 'move'  // h5拖动图标
  }
  const dragover = (e) => {
    // 在目标元素中经过 必须阻止默认行为 否则不能 使用 drop
    console.log('>在目标元素中经过>>>>');
    e.preventDefault()
  }
  const dragleave = (e) => {
    // 离开元素时
    console.log('>>>离开元素时>>>');
    e.dataTransfer.dropEffect = 'none'
  }
  const drop = (e) => {
    // 松手时 根据拖拽的组件 新增一个组件
    console.log('>>>>>放开组件元素<<<<<');
    templateId++
    console.log(e, '...', currentComponent);
    // let modelValue = props.modelValue.value
    // modelValue = {
    //   ...modelValue, blocks: [
    //     ...modelValue.blocks,
    //     { top: e.offsetY, left: e.offsetX, index: 1, key: currentComponent.key,alignCenter: true }
    //   ]
    // }
    const handleModelValue = props.handleModelValue
    handleModelValue({ insetBlock: { top: e.offsetY, left: e.offsetX, index: 1, key: currentComponent.key, alignCenter: true, templateId, config: {}, hasReSize: false }, insert: true })
    currentComponent = null
  }
  const onDragStart = (e, component) => {
    const containerRef = props.containerRef.value
    // 进入容器 dragenter
    // 在容器中经过 必须阻止默认行为 否则默认不能促销 drop dragover
    // 离开容器 dragleave
    // drop 松手根据拖拽的组件 添加组件 drop
    containerRef.addEventListener('dragenter', dragenter)
    containerRef.addEventListener('dragover', dragover)
    containerRef.addEventListener('dragleave', dragleave)
    containerRef.addEventListener('drop', drop)
    currentComponent = component
    // 拖拽前 发布订阅 拖拽前的状态 并记录下来
    event.emit('startDragComponent', component)
    console.log(e, '>>>', component);

  }
  const onDragEnd = () => {
    const containerRef = props.containerRef.value
    // 进入容器 dragenter
    // 在容器中经过 必须阻止默认行为 否则默认不能促销 drop dragover
    // 离开容器 dragleave
    // drop 松手根据拖拽的组件 添加组件 drop
    containerRef.removeEventListener('dragenter', dragenter)
    containerRef.removeEventListener('dragover', dragover)
    containerRef.removeEventListener('dragleave', dragleave)
    containerRef.removeEventListener('drop', drop)
    event.emit('endDragComponent')
  }

  return { onDragStart, onDragEnd }
}
